<template>
    

   <TraceabilityDetailtyDetail /> 
   <div>
      <el-radio-group v-model="from.radio1" @change="FarmMessage" size="large">
        <el-radio-button label="养殖信息(5/5)"  :value="1"  />
        <el-radio-button label="屠宰信息(5/5)"  :value="2" />
        <el-radio-button label="深加工信息(0/5)" :value="3" />
      </el-radio-group>
    </div>
  <br>
  <h2 style="color: rgba(5, 117, 230, 0.8);">养殖信息 &nbsp;&nbsp;&nbsp;<el-radio-button label="设置" @click="opendata"  /></h2> 
  <el-dialog v-model="dialogFormVisible2" title="养殖信息" width="500">
    <el-form :model="frrom">
      <el-form-item label="品种" :label-width="formLabelWidth">
        <el-input v-model="frrom.husbandryName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="来源" :label-width="formLabelWidth">
        <el-input v-model="frrom.husbandrySource" autocomplete="off" />
      </el-form-item>
      <el-form-item label="饲养天数" :label-width="formLabelWidth">
        <el-input v-model="frrom.husbandryDay" autocomplete="off" />
      </el-form-item>
      <el-form-item label="饲料品牌" :label-width="formLabelWidth">
        <el-input v-model="frrom.husbandryBrand" autocomplete="off" />
      </el-form-item>
      <el-form-item label="饲养负责人" :label-width="formLabelWidth">
        <el-input v-model="frrom.husbandryPerson" autocomplete="off" />
      </el-form-item>
      <el-form-item label="出栏日期" :label-width="formLabelWidth">
        <el-col :span="11">
        <el-date-picker
          v-model="frrom.husbandryTime"
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-col>
      
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
      
        <el-button type="primary" @click="UpdateHusbandry">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-divider />
    <table  v-for="i in data1">
      <tr>
        <td>品种:   {{i.husbandryName }}</td>
        &nbsp;  &nbsp; &nbsp;
        <td>来源：{{ i.husbandrySource }}</td>
        <td></td>
      </tr>
      <tr>
        <td>饲养天数：  {{i.husbandryDay }}天</td>
        &nbsp;  &nbsp; &nbsp;
        <td>饲料品牌：  {{i.husbandryBrand }}</td>
     
      </tr>
      <tr>
        <td>饲养负责人：{{i.husbandryPerson }}</td>
        &nbsp;  &nbsp; &nbsp;
        <td>出栏日期：{{i.husbandryTime.substr(0,10) }}</td>

      </tr>
    </table>
    
  <div> 
  </div>
  <div>
    <h2 style="color: rgba(5, 117, 230, 0.8);">保健信息 &nbsp;&nbsp;&nbsp;<el-radio-button label="新增行" @click="addInput"  /></h2> 
    <el-divider />
    <div id="app">
    <table style="border-collapse: collapse;height: 100px;width: 800px;">
        <tr style="text-align: center;background-color: darkgrey;">
            <td>饲养天数</td>
            <td>保健方式</td>
            <td>保健方法</td>
            <td>操作</td>
        </tr>
        
        <tr v-for="(i, index) in Helthdata" :key="index" style="text-align: center;">
      <td v-if="!i.isEditing">{{ i.healthDay }}</td>
      <td v-else>
        <input v-model="showshowshow.healthDay" type="text" />
      </td>

      <td v-if="!i.isEditing">{{ i.healthType }}</td>
      <td v-else>
        <input v-model="showshowshow.healthType" type="text" />
      </td>

      <td v-if="!i.isEditing">{{ i.healthMethod }}</td>
      <td v-else>
        <input v-model="showshowshow.healthMethod" type="text" />
      </td>

      <td>
        <el-text 
          v-if="!i.isEditing" 
          style="font-size: 17px;color: rgba(5, 117, 230, 0.8);" 
          @click="editRow(i)">修改</el-text>&nbsp;

        <el-text 
          v-if="!i.isEditing" 
          style="font-size: 17px;color: rgba(5, 117, 230, 0.8);" 
          @click="deleteRow(i)">删除</el-text>

        <el-text 
          v-if="i.isEditing" 
          style="font-size: 17px;color: rgba(5, 117, 230, 0.8);" 
          @click="saveRow(i)">保存</el-text>
          <el-text 
          v-if="i.isEditing" 
          style="font-size: 17px;color: rgba(5, 117, 230, 0.8);" 
          @click="quxiao(i)">取消</el-text>
      </td>
    </tr>
        <tr v-show="showshow.ishow" >
        <td style="margin-left: 30px;text-align: center;" >
          <el-input style="width: 140px"  v-model="showshow.healthDay"/>
        </td>   
        <td style="margin-left: 30px;text-align: center;">
            <el-input style="width: 140px"  v-model="showshow.healthType"/></td>   
        <td style="margin-left: 30px;text-align: center;">
           <el-input style="width: 140px"  v-model="showshow.healthMethod"/></td>  
        <td style="margin-left: 30px;text-align: center;">
          <el-text style="font-size: 17px;color: rgba(5, 117, 230, 0.8);" @click="addHelth">保存</el-text>&nbsp;<el-text style="font-size: 17px;color: rgba(5, 117, 230, 0.8);" @click="addquxiao">取消</el-text></td>  
      </tr>
    </table>
</div>
<h2 style="color: rgba(5, 117, 230, 0.8);">动检证 &nbsp;&nbsp;&nbsp;</h2> 
<el-divider />
<div>
  <el-upload
                              class="avatar-uploader"
                              v-model:file-list="fileList1"
                              action="https://localhost:44333/Traceability/UploadFileSecond"
                              :on-success="handleAvatarSuccess1"
                              list-type="picture-card"
                              :on-preview="handlePictureCardPreview1"
                              :on-remove="handleRemove1"
                          >    
                              <el-icon><Plus /></el-icon>
                          </el-upload>
  
                          <el-dialog v-model="dialogVisible1">
                              <img w-full :src="dialogImageUrl1" alt="Preview Image" />
                    </el-dialog>
</div>
<h2 style="color: rgba(5, 117, 230, 0.8);">企业信息 &nbsp;&nbsp;&nbsp;<el-radio-button label="设置" @click="setInput"  /></h2> 
<el-divider />
<div>
<table v-for="i in GetHusbandryEnterprisesdata">
  <tr >
    <td>养殖场：{{ i.enterpriseFarm }}</td>&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <td>负责人：{{i.enterprisePrincipal  }}</td>
  </tr>
  <br>
  <tr>  
    <td>存栏数量:{{ i.enterpriseNumber }}</td>
  </tr>
</table>
</div>

<el-dialog v-model="dialogFormVisible3" title="Shipping address" width="500">
    <el-form :model="form">
      <el-form-item label="养殖人" :label-width="formLabelWidth3">
        <el-input v-model="form.enterpriseFarm" autocomplete="off" />
      </el-form-item>
      <el-form-item label="负责人" :label-width="formLabelWidth3">
        <el-input v-model="form.enterprisePrincipal" autocomplete="off" />
      </el-form-item>
      <el-form-item label="存栏数量（只）" :label-width="formLabelWidth3">
        <el-input v-model="form.enterpriseNumber" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="ModifyUpdateHusbandryEnterprise1">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>


<h2 style="color: rgba(5, 117, 230, 0.8);">企业照片 &nbsp;&nbsp;&nbsp;</h2> 
<el-divider />
<div>
  <el-upload
                              class="avatar-uploader"
                              v-model:file-list="fileList2"
                              action="https://localhost:44333/Traceability/UploadFileSecond"
                              :on-success="handleAvatarSuccess2"
                              list-type="picture-card"
                              :on-preview="handlePictureCardPreview2"
                              :on-remove="handleRemove2"
                          >
                              <el-icon><Plus /></el-icon>
                          </el-upload>
  
                          <el-dialog v-model="dialogVisible">
                              <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
</div>
  </div>
</template>
<script lang="ts" setup>

import{ModifyUpdateHusbandryEnterprise} from '@/api/admin/index'
import{ModifyHusbandryEnterpriseCorporatePhotoImages} from '@/api/admin/index'
import{ModifyDelHusbandryEnterpriseCorporatePhotoImages} from '@/api/admin/index'
import{GetHusbandryEnterpriseImages} from '@/api/admin/index'
import{ModifyHusbandryEnterpriseImages} from '@/api/admin/index'
import{ModifyDelHusbandryEnterpriseImages} from '@/api/admin/index'
import{GetHusbandryEnterprises} from '@/api/admin/index'
import{GetHealthById} from '@/api/admin/index'
import{updateHealth} from '@/api/admin/index'
import{AddHealth} from '@/api/admin/index'
import{GetHealth} from '@/api/admin/index'
import{HusbandryMessage} from '@/api/admin/index'
import{UpdateHusbandryMessage} from '@/api/admin/index'
import TraceabilityDetailtyDetail from '@/views/TraceabilityManagements/PublicTraceabilityDetailsView.vue'
import { DelPicc } from '@/api/admin/index'
import { Plus } from '@element-plus/icons-vue'
import {type Pic,type UpdateHusbandryMes,type Helth,type HusbandryEnterprise} from '@/api/admin/type'
import{AddPic} from '@/api/admin/index'
import type { UploadProps, UploadUserFile } from 'element-plus'
import {GetTraceabilityIndexById} from '@/api/admin/index'
import { reactive, ref,onMounted } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { useRouter, useRoute } from 'vue-router' 
import axios from 'axios'
const route = useRoute()
const router = useRouter()
const formLabelWidth = '140px'
onMounted(()=>{
    GetTraceabilityById()
    console.log(rerepic.value);
    FarmMessage()

    getHusbandry()
    GetHealth1()
    GetHusbandryEnterprises1()
    GetHusbandryEnterpriseImages1()
    GetHusbandryEnterpriseImages2()
})
const from=ref({
    indexId:null,
  dialogFormVisible:false,
  shopName:'',
  batch:'',
  expiration:null,
  production_License:'',
  manufacturing:'',
  information:'',
  image:'',
  createById:null,
  createByName:'' ,
  createTime :'',
  isno:false,
  IsDeleted:false,
  imagess:'',
  fileList:[],
  radio1:1,
 
})
const frrom=ref({
  datahusbandry:[],
  husbandryName:'',
  husbandryId:0,
  husbandryBrand:'',
  husbandryDay:0,
  husbandryPerson:'',
  husbandrySource:'',
  husbandryTime:''
})
const rerepic=ref([])
const data=ref([])
console.log(from.value);
const fileList = ref([
  {
    url: '',
  },
])
const GetTraceabilityById = async () => {
    const res = await GetTraceabilityIndexById(Number(localStorage.getItem("TraceabilityId")));
    from.value = res.data;
    if (res.data.imagess) {
      const imagesArray = res.data.imagess.split(',');

      // 清空 fileList
      fileList.value = [];

      // 将每个图片路径添加到 fileList
      imagesArray.forEach(image => {
        fileList.value.push({ url: image.trim() });
      });
      console.log('File List:', fileList.value); // 查看结果
    } 
};
const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  
  DelPic(uploadFile.url)
}
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  
  response,
  uploadFile
) => {
const aa=('https://localhost:44333'+JSON.stringify(response.url).replace(/"/g,''))
  console.log('https://localhost:44333'+JSON.stringify(response.url).replace(/"/g,''));
  console.log(aa);
 
  if (!fileList.value.some(file => file.url === aa.trim())) {
  fileList.value.push({ url: aa.trim() });
}
 
   console.log(fileList.value);
   addpic(aa)
}
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true

}
const DelPic=async(val:any)=>{
  
    let inputt=<Pic>{}
        inputt.iid=route.query.Id
        inputt.pic=val
        console.log(inputt);
    const cc=await DelPicc(inputt)
    console.log(cc);
    GetTraceabilityById()
}
const addpic=async(val:any)=>{
    let input=<Pic>{}
        input.iid=route.query.Id
        input.pic=val
      
        
    const bb=await AddPic(input)
    console.log(bb);
    GetTraceabilityById()
}
const FarmMessage=()=>{
    switch(from.value.radio1){
        case 1:
          router.push({name:"TraceabilityHusbandryDetails"})
        break;   
        case 2:
        router.push({name:"TraceabilitySlaughterDetails"})
        break;  
        case 3:
        router.push({name:"TraceabilityDeepProcessingDetails"})
        break;   
      }
} 
const data1=ref([])
const getHusbandry=async()=>{
  await HusbandryMessage().then(function(res){
    console.log(res.data);
    data1.value=res.data
  })
}
const dialogFormVisible2 = ref(false)
const opendata=()=>{
  dialogFormVisible2.value=true;
  getHusbandyry()
}
const getHusbandyry=async()=>{
  await HusbandryMessage().then(function(res){
    console.log(res.data);
    frrom.value=res.data[0]
    console.log( from.value);
    
  })
    
}
const Helthdata=ref([])
const GetHealth1=async()=>{
  await GetHealth().then(function(res){
    console.log(res.data);
    Helthdata.value=res.data
  })
}
const UpdateHusbandry=async()=>{
  await UpdateHusbandryMessage(frrom.value).then(function(res){
      console.log(res.data);
      if(res.data>0){
       
        dialogFormVisible2.value=false
        
        getHusbandry()
      }
  })
}
const showshow=ref<Helth>({
    ishow:false,
    healthId:0,
    healthDay:null,
    healthType:'',
    healthMethod:'',
})
const addInput=()=>{
  showshow.value.ishow=true
}
const addHelth=async()=>{
  console.log( showshow.value.healthDay);
   console.log( showshow.value.healthType);
   console.log( showshow.value.healthMethod);   
  
   
  await AddHealth(showshow.value).then(function(res){
      console.log(res.data);
      if(res.data>0){
        GetHealth1()
      }
  })
}
const showshowshow=ref<Helth>({
     ishow:false,
    healthId:0,
    healthDay:null,
    healthType:'',
    healthMethod:'',
})
const editRow=async (val:any)=>{
  val.isEditing = true;
console.log(val);
GetHealthById1(val.healthId)

}
const GetHealthById1=async(val:any)=>{
  await GetHealthById(val).then(function(res){
    console.log(res.data);
    
    showshowshow.value.healthId=res.data.healthId
    showshowshow.value.healthMethod=res.data.healthMethod
    showshowshow.value.healthDay=res.data.healthDay
    showshowshow.value.healthType=res.data.healthType
  })
}
const saveRow=async(val:any)=>{
  await updateHealth(showshowshow.value).then(function(res){
  console.log(res.data);
  if(res.data>0){
    GetHealth1()
    val.isEditing = false;
  }       
  })
}
const quxiao=(val:any)=>{
  val.isEditing = false;
console.log(val);
}
const addquxiao=()=>{
  showshow.value.ishow=false
}
const GetHusbandryEnterprisesdata=ref([])
const GetHusbandryEnterprises1=async()=>{
  await  GetHusbandryEnterprises().then(function(res){
    console.log(res.data);
    GetHusbandryEnterprisesdata.value=res.data 
  })
} 
const fileList1 = ref([
  {
    url: '',
  },
])
//动检证照片
const GetHusbandryEnterpriseImages1=async()=>{
  await GetHusbandryEnterpriseImages().then(function(res){
    console.log(res.data[0]);
    if (res.data[0].dynamicVerification) {
      const imagesArray1 = res.data[0].dynamicVerification.split(',');

      // 清空 fileList1
      fileList1.value = [];

      // 将每个图片路径添加到 fileList1
      imagesArray1.forEach(dynamicVerification => {
        fileList1.value.push({ url: dynamicVerification.trim() });
      });
      console.log('File List:', fileList1.value); // 查看结果
    } 
  })
}
const dialogImageUrl1 = ref('')
const dialogVisible1 = ref(false)

const handleRemove1: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  
  DelHusbandryEnterpriseImages(uploadFile.url)
}
const handleAvatarSuccess1: UploadProps['onSuccess'] = (
  
  response,
  uploadFile
) => {
const aa=('https://localhost:44333'+JSON.stringify(response.url).replace(/"/g,''))
  console.log('https://localhost:44333'+JSON.stringify(response.url).replace(/"/g,''));
  console.log(aa);
 
  if (!fileList1.value.some(file => file.url === aa.trim())) {
  fileList1.value.push({ url: aa.trim() });
}
 
   console.log(fileList1.value);
   addHusbandryEnterpriseImages(aa)
}
const handlePictureCardPreview1: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl1.value = uploadFile.url!
  dialogVisible1.value = true

}
//----------------------------------------------------------------------
const DelHusbandryEnterpriseImages=async(val:any)=>{
  
  let inputt=<Pic>{}
      inputt.iid=route.query.Id
      inputt.pic=val
      console.log(inputt);
  const cc=await ModifyDelHusbandryEnterpriseImages(inputt)
  console.log(cc);
  GetHusbandryEnterpriseImages1()
}
const addHusbandryEnterpriseImages=async(val:any)=>{
  let input=<Pic>{}
      input.iid=route.query.Id
      input.pic=val
    
      
  const bb=await ModifyHusbandryEnterpriseImages(input)
  console.log(bb);
  GetHusbandryEnterpriseImages1()
}
const fileList2 = ref([
  {
    url: '',
  },
])
//企业照片
const GetHusbandryEnterpriseImages2=async()=>{
  await GetHusbandryEnterpriseImages().then(function(res){
    console.log(res.data[0]);
    if (res.data[0].corporatePhoto) {
      const imagesArray2 = res.data[0].corporatePhoto.split(',');

      // 清空 fileList1
      fileList2.value = [];

      // 将每个图片路径添加到 fileList1
      imagesArray2.forEach(corporatePhoto => {
        fileList2.value.push({ url: corporatePhoto.trim() });
      });
      console.log('File List:', fileList2.value); // 查看结果
    } 
  })
}
const dialogImageUrl2 = ref('')
const dialogVisible2 = ref(false)

const handleRemove2: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  
  DelHusbandryEnterpriseCorporatePhotoImages(uploadFile.url)
}
const handleAvatarSuccess2: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
const aa=('https://localhost:44333'+JSON.stringify(response.url).replace(/"/g,''))
  console.log('https://localhost:44333'+JSON.stringify(response.url).replace(/"/g,''));
  console.log(aa);
  if (!fileList2.value.some(file => file.url === aa.trim())) {
  fileList2.value.push({ url: aa.trim() });
}
 
   console.log(fileList2.value);
   addHusbandryEnterpriseCorporatePhotoImages(aa)
}
const handlePictureCardPreview2: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl2.value = uploadFile.url!
  dialogVisible2.value = true

}
//----------------------------------------------------------------------
const addHusbandryEnterpriseCorporatePhotoImages=async(val:any)=>{
  
  let inputt=<Pic>{}
      inputt.iid=route.query.Id
      inputt.pic=val
      console.log(inputt);
  const cc=await ModifyHusbandryEnterpriseCorporatePhotoImages(inputt)
  console.log(cc);
  GetHusbandryEnterpriseImages2()
}
const DelHusbandryEnterpriseCorporatePhotoImages=async(val:any)=>{
  let input=<Pic>{}
      input.iid=route.query.Id
      input.pic=val
    
      
  const bb=await ModifyDelHusbandryEnterpriseCorporatePhotoImages(input)
  console.log(bb);
  GetHusbandryEnterpriseImages2()
}


</script>

